import React from "react";
// useHistory的hook已经没有
// 现在如果要跳转，需要用到useNavigate
import { Link, Routes, Route, useNavigate } from "react-router-dom";

const Home = () => {
  // 执行以后返回navigate函数
  const navigate = useNavigate();

  const toAbout = () => {
    // navigate函数里面直接传入一个路径的字符串，相当于push
    navigate("/about");

    // 如果要使用replace，需要加第二个对象参数{ replace: true }
    // navigate("/about", { replace: true });

    // navigate里面直接写数字，相当于go
    // navigate(-1);
  };
  return (
    <div>
      这是首页 - <button onClick={toAbout}>btn</button>
    </div>
  );
};

const About = () => {
  return <div>这是关于页</div>;
};

const App = () => {
  return (
    <>
      <h2>react-router-v6-编程式导航</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        {/* 404路由要写到最后 */}
        <Route path="*" element={<div>404 not found...</div>}></Route>
      </Routes>
    </>
  );
};

export default App;
